<template>
  <div class="home">
    <!-- Hero 区域 -->
    <section class="hero">
      <h1 class="hero-title">前端开发工具集</h1>
      <p class="hero-subtitle">
        一站式解决前端开发中的常见需求，提供多种实用工具
      </p>
      <el-button type="primary" size="large" @click="scrollToTools">
        开始使用
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </section>

    <!-- 数据统计 -->
    <section class="stats">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Tools /></el-icon>
                <span>工具总数</span>
              </div>
            </template>
            <div class="stat-value">8+</div>
            <div class="stat-desc">涵盖多个开发场景</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Monitor /></el-icon>
                <span>在线访问</span>
              </div>
            </template>
            <div class="stat-value">24/7</div>
            <div class="stat-desc">随时随地可用</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon><Connection /></el-icon>
                <span>开源免费</span>
              </div>
            </template>
            <div class="stat-value">MIT</div>
            <div class="stat-desc">遵循开源协议</div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 工具列表 -->
    <section id="tools" class="tools">
      <h2 class="section-title">工具列表</h2>
      <el-row :gutter="20">
        <el-col v-for="tool in tools" :key="tool.path" 
          :xs="24" :sm="12" :md="8" :lg="6">
          <el-card 
            shadow="hover" 
            class="tool-card"
            @click="$router.push(tool.path)"
          >
            <el-icon class="tool-icon">
              <component :is="tool.icon" />
            </el-icon>
            <h3 class="tool-title">{{ tool.name }}</h3>
            <p class="tool-desc">{{ tool.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 特色功能 -->
    <section class="features">
      <h2 class="section-title">特色功能</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="feature-item">
            <el-icon class="feature-icon"><Sunny /></el-icon>
            <h3>明暗主题</h3>
            <p>支持自动切换明暗主题，保护您的眼睛</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-item">
            <el-icon class="feature-icon"><Cellphone /></el-icon>
            <h3>响应式设计</h3>
            <p>完美适配各种屏幕尺寸的设备</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-item">
            <el-icon class="feature-icon"><Lightning /></el-icon>
            <h3>快速高效</h3>
            <p>所有工具均为纯前端实现，响应迅速</p>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup>
import {
  Tools,
  Monitor,
  Connection,
  Document,
  Link,
  Timer,
  Search,
  Brush,
  Edit,
  ArrowRight,
  Sunny,
  Cellphone,
  Lightning
} from '@element-plus/icons-vue'

const tools = [
  {
    name: '子网掩码计算器',
    path: '/tools/subnet',
    icon: 'Monitor',
    description: '快速计算IP地址范围和子网掩码'
  },
  {
    name: 'JSON 格式化',
    path: '/tools/json',
    icon: 'Document',
    description: 'JSON 数据的格式化和验证工具'
  },
  {
    name: 'Base64 编解码',
    path: '/tools/base64',
    icon: 'Connection',
    description: '支持文本和文件的 Base64 转换'
  },
  {
    name: 'URL 编解码',
    path: '/tools/url',
    icon: 'Link',
    description: 'URL 参数的编码和解码工具'
  },
  {
    name: '时间戳转换',
    path: '/tools/timestamp',
    icon: 'Timer',
    description: '在各种时间格式之间自由转换'
  },
  {
    name: '正则表达式',
    path: '/tools/regex',
    icon: 'Search',
    description: '正则表达式在线测试工具'
  },
  {
    name: '颜色选择器',
    path: '/tools/color',
    icon: 'Brush',
    description: '颜色选择和格式转换工具'
  },
  {
    name: 'Markdown 预览',
    path: '/tools/markdown',
    icon: 'Edit',
    description: 'Markdown 实时预览编辑器'
  }
]

const scrollToTools = () => {
  document.getElementById('tools').scrollIntoView({ 
    behavior: 'smooth' 
  })
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Hero 区域 */
.hero {
  text-align: center;
  padding: 60px 0;
  margin-bottom: 40px;
}

.hero-title {
  font-size: 48px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 20px;
  color: var(--el-text-color-regular);
  margin-bottom: 40px;
  line-height: 1.5;
}

/* 数据统计 */
.stats {
  margin-bottom: 60px;
}

.stat-card {
  text-align: center;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.stat-value {
  font-size: 36px;
  font-weight: 600;
  color: var(--el-color-primary);
  margin: 20px 0 10px;
}

.stat-desc {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

/* 工具列表 */
.section-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  text-align: center;
  margin-bottom: 40px;
}

.tools {
  margin-bottom: 60px;
}

.tool-card {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--el-box-shadow-light);
}

.tool-icon {
  font-size: 40px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

.tool-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
}

.tool-desc {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}

/* 特色功能 */
.features {
  margin-bottom: 60px;
}

.feature-item {
  text-align: center;
  padding: 30px;
}

.feature-icon {
  font-size: 48px;
  color: var(--el-color-primary);
  margin-bottom: 20px;
}

.feature-item h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 12px;
}

.feature-item p {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.6;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .hero {
    padding: 40px 0;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .section-title {
    font-size: 28px;
  }

  .stat-card {
    margin-bottom: 20px;
  }

  .feature-item {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .section-title {
    font-size: 24px;
  }
}
</style> 